<template>
    <div class="section post">
      <article class="media">
          <figure class="media-left">
              <p class="image is-64x64">
                  <img src="@/../public/images/avatars/molly.png">
              </p>
          </figure>
          <div class="media-content">
              <div class="content">
                  <div class="field">
                      <div class="control">
                          <input class="input" type="text" placeholder="Post title." v-model="title">
                      </div>
                  </div>
                  <div class="field">
                      <div class="control">
                          <textarea class="textarea" placeholder="Post body." v-model="content"></textarea>
                      </div>
                  </div>
                  <div>
                      <button @click.prevent="submitPost()" class="button is-info">Submit</button>
                  </div>
              </div>
          </div>
      </article>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { Item } from '@/components/classes/Item'

@Component({})
export default class SubmitBox extends Vue {
    private title = "";
    private content = "";
    public submitPost():void{
        if (this.title.length > 0 && this.content.length > 0) {

            let post:Item = {
                id:0,
                votes:0,
                title:this.title,
                content:this.content,
                url:"#",
                avatar:"./images/avatars/daniel.jpg",
                submissionImage:"./images/submissions/image-yellow.png"
            };
            this.$emit("submittedPost",post);
            this.title = "";
            this.content = "";
        }else{
            alert("请输入内容");
        }
    }
}
</script>

<style scoped>
</style>
